<template>
  <v-card class="border" rounded="lg" variant="flat">
    <v-card-title class="d-flex align-center">
      <span class="text-h5">Products</span>
      <v-spacer />
      <v-text-field
        v-model="search"
        append-inner-icon="mdi-magnify"
        class="mr-2"
        density="compact"
        hide-details
        label="Search products"
        single-line
        variant="outlined"
      />
      <v-btn color="primary" prepend-icon="mdi-plus" variant="flat" @click="addProduct">
        Add Product
      </v-btn>
    </v-card-title>

    <v-card-text>
      <v-data-table
        class="border rounded-lg"
        :headers="headers"
        :items="products"
        :items-per-page="10"
        :search="search"
      >
        <template #item.image="{ item }">
          <v-avatar class="my-1" rounded="0" size="48">
            <v-img :alt="item.name" cover :src="item.image" />
          </v-avatar>
        </template>

        <template #item.price="{ item }">
          {{ formatPrice(item.price) }}
        </template>

        <template #item.stock="{ item }">
          <v-progress-linear
            class="mt-2"
            :color="getStockColor(item.stock, item.stockMax)"
            height="8"
            :model-value="(item.stock / item.stockMax) * 100"
            rounded
          />
          <div class="text-caption text-medium-emphasis text-center">
            {{ item.stock }} in stock
          </div>
        </template>

        <template #item.status="{ item }">
          <v-chip :color="item.status === 'In Stock' ? 'success' : 'error'" size="small">
            {{ item.status }}
          </v-chip>
        </template>

        <template #item.actions="{ item }">
          <v-btn
            icon
            size="small"
            variant="flat"
            @click="editProduct(item)"
          >
            <v-icon>mdi-pencil</v-icon>
          </v-btn>
          <v-btn
            icon
            size="small"
            variant="flat"
            @click="deleteProduct(item)"
          >
            <v-icon>mdi-delete</v-icon>
          </v-btn>
        </template>
      </v-data-table>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const search = ref('')

  interface _Product {
    id: number
    name: string
    category: string
    price: number
    stock: number
    stockMax: number
    status: string
    image: string
  }

  const headers = [
    { title: '', key: 'image', sortable: false, width: '60px' },
    { title: 'Product', key: 'name' },
    { title: 'Category', key: 'category' },
    { title: 'Price', key: 'price' },
    { title: 'Stock', key: 'stock' },
    { title: 'Status', key: 'status' },
    {
      title: 'Actions',
      key: 'actions',
      sortable: false,
      align: 'end' as const,
    },
  ] as const

  type _ProductHeaders = typeof headers[number]

  const products = [
    {
      id: 1,
      name: 'Wireless Headphones',
      category: 'Electronics',
      price: 99.99,
      stock: 45,
      stockMax: 100,
      status: 'In Stock',
      image: 'https://picsum.photos/200/200?random=1',
    },
    {
      id: 2,
      name: 'Smart Watch',
      category: 'Wearables',
      price: 199.99,
      stock: 12,
      stockMax: 50,
      status: 'Low Stock',
      image: 'https://picsum.photos/200/200?random=2',
    },
    {
      id: 3,
      name: 'Bluetooth Speaker',
      category: 'Audio',
      price: 79.99,
      stock: 0,
      stockMax: 30,
      status: 'Out of Stock',
      image: 'https://picsum.photos/200/200?random=3',
    },
    {
      id: 4,
      name: 'Laptop Backpack',
      category: 'Accessories',
      price: 49.99,
      stock: 28,
      stockMax: 50,
      status: 'In Stock',
      image: 'https://picsum.photos/200/200?random=4',
    },
    {
      id: 5,
      name: 'Wireless Mouse',
      category: 'Computer',
      price: 29.99,
      stock: 65,
      stockMax: 100,
      status: 'In Stock',
      image: 'https://picsum.photos/200/200?random=5',
    },
  ]

  function formatPrice (price: number) {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(price)
  }

  function getStockColor (stock: number, max: number) {
    const percentage = (stock / max) * 100
    if (percentage > 50) return 'success'
    if (percentage > 20) return 'warning'
    return 'error'
  }

  function addProduct () {
    // Add product logic
    console.log('Add new product')
  }

  function editProduct (product: any) {
    // Edit product logic
    console.log('Edit product:', product)
  }

  function deleteProduct (product: any) {
    // Delete product logic
    console.log('Delete product:', product)
  }
</script>
